<template>
  <div class="centre">
     <div class="centre-animation">
      <img
        src="../../../assets/img/decisionAnalysis/centre_animation.png"
        alt=""
      />
    </div>

    <div
      class="corner"
      :style="`top: ${item.top};right: ${item.right};bottom: ${item.bottom};left: ${item.left}; background-image: url(${item.bg})`"
      v-for="(item, index) in cornerList"
      :key="index"
    >
      <div class="content">
        <div class="header-title">
          <span class="title">{{ item.title }}</span>
          <span class="percent">{{ item.percent }} </span>
          <img class="icon" :src="item.icon" alt="" />
        </div>
        <div class="data">
          <span class="num">{{ item.num }}</span>
          <span class="unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>

    <div class="big-title">
      <span class="title">核定能力</span>
      <span class="unit">（万吨/年）</span>
      <span>7</span>
      <span>5</span>
      <span>0</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DafosiControlWebCentreTop',

  data() {
    return {
      cornerList: [
        {
          top: '-1.875rem',
          left: '1.5rem',
          bg: require('../../../assets/img/decisionAnalysis/corrner_top_left.png'),
          icon: require('../../../assets/img/decisionAnalysis/increase_icon.png'),
          title: '年累计进尺',
          percent: '106%',
          num: 8538,
          unit: '米'
        },
        {
          top: '-1.875rem',
          right: '0.75rem',
          bg: require('../../../assets/img/decisionAnalysis/corner_bottom_left.png'),
          icon: require('../../../assets/img/decisionAnalysis/decrease_icon.png'),
          title: '年累计销售量',
          percent: '51%',
          num: 317.1,
          unit: '万吨'
        },
        {
          bottom: '9.0625rem',
          left: '0rem',
          bg: require('../../../assets/img/decisionAnalysis/corner_bottom_left.png'),
          icon: require('../../../assets/img/decisionAnalysis/decrease_icon.png'),
          title: '年累计产量',
          percent: '49%',
          num: 328.1,
          unit: '万吨'
        },
        {
          bottom: '9.0625rem',
          right: '-1.5625rem',
          bg: require('../../../assets/img/decisionAnalysis/corner_bottom_right.png'),
          icon: require('../../../assets/img/decisionAnalysis/increase_icon.png'),
          title: '矿井利润',
          percent: '5.3%',
          num: 321451,
          unit: '万元'
        }
      ]
    };
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
.centre {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.centre-animation {
  width: 62.5rem;
  height: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.corner {
  position: absolute;
  width: 22.3125rem;
  height: 11.9375rem;
  background-repeat: no-repeat;
  background-size: 100% 80%;
  // background-color: rgba(255, 255, 255, 0.1);
  background-position: center center;
  color: #fff;
  .content {
    position: relative;
    height: 100%;
    width: 100%;
    .header-title {
      position: absolute;
      top: 22%;
      left: 50%;
      transform: translateX(-50%);
      .title {
        height: 1rem;
        font-size: 1rem;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.075rem;
      }
      .percent {
        margin-left: 0.125rem;
        font-size: 1rem;
        height: 1rem;
        line-height: 1;
      }
      .icon {
        vertical-align: middle;
        width: 0.9375rem;
      }
    }
    .data {
      position: absolute;
      top: 46.5%;
      left: 50%;
      transform: translate(-50%,-50%);
      .num {
        font-size: 1.375rem;
        height: 1.375rem;
        font-family: Agency FB, Agency FB-Bold;
        font-weight: bold;
        line-height: 1;
      }
      .unit {
        margin-left: 0.375rem;
        height: 0.875rem;
        font-size: 0.875rem;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        letter-spacing: 0.0875rem;
      }
    }
  }
}
.big-title {
  position: absolute;
  left: 50%;
  bottom: 3.125rem;
  transform: translateX(-50%);
  color: #fff;
  display: flex;
  align-items: center;
  .title {
    height: 1.125rem;
    font-size: 1.125rem;
    line-height: 1;
    height: 1.125rem;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    letter-spacing: 0.0844rem;
  }
  .unit {
    font-size: 1rem;
    height: 1rem;
    line-height: 1;
  }
  span:nth-of-type(n + 3) {
    display: inline-block;
    width: 1.625rem;
    height: 1.9375rem;
    line-height: 1.9375rem;
    text-align: center;
    font-size: 1.5rem;
    font-family: Agency FB, Agency FB-Bold;
    font-weight: 700;
    letter-spacing: 0.1125rem;
    background-image: url("../../../assets/img/decisionAnalysis/text_border.png");
  }
  span:nth-of-type(n + 4) {
    margin-left: 0.7231rem;
  }
  span:nth-of-type(3) {
    margin-left:0.9819rem;
  }
}
</style>
